<template>
  <el-table
    :data="students"
    border
    style="width: 100%">
    <el-table-column
      prop="studentName"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
    <el-table-column
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="update(scope.row.studentId)">修改</el-button>
        <el-button size="small" type="danger" @click="del(scope.row.studentId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {showStudentById,deleteStudent} from '../../service'
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    async created(){
      await this.show();
      console.log("students:",this.students);
    },
    computed:{
      ...mapState("student",["students"])
    },
    methods:{
      async update(studentId){
        console.log("studentId",studentId)
        // let response = await showStudentById(studentId);
        // this.$emit('setStudent',response.data);
        // this.$emit("setDialogVisible",true);
        this.setStudent(studentId);
        this.setDialogVisible(true);
      },
      async del(studentId){
        this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await deleteStudent(studentId);
          await this.show();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //
          console.log("studentId",studentId);
        })
        
      },
      ...mapMutations("student",["setDialogVisible"]),
      ...mapActions("student",["setStudent","show"])
    }
}
</script>

<style>

</style>